<style type="text/css">
.showcase.row.rightalign {
    text-align: right;
}

.showcase.box {
    margin-bottom: 30px;
}

.showcase .contentbox {
    margin-bottom: 30px;
}
</style>
<div class="showcase box" ng-controller="showcaseController">
    <div class="showcase row rightalign">
        <div class="col-md-12">
            <label>导航区
                <input type="checkbox" ng-model="showNavPart" />
            </label>
            <label>示例区
                <input type="checkbox" ng-disabled="!showSrcPart" ng-model="showExpPart" />
            </label>
            <label>源码区
                <input type="checkbox" ng-disabled="!showExpPart" ng-model="showSrcPart" />
            </label>
        </div>
    </div>
    <div class="row">
        <div class="contentbox col-md-3" ng-show="showNavPart">
            <showcase-nav></showcase-nav>
        </div>
        <div class="contentbox" ng-class="{'col-md-5': showNavPart && showSrcPart, 'col-md-6': !showNavPart && showSrcPart, 'col-md-9': showNavPart && !showSrcPart, 'col-md-12': !showNavPart && !showSrcPart}" ng-show="showExpPart">
            <showcase-headline></showcase-headline>
            <div ui-view>
                <h3>组件示例</h3>
                <p>演示使用AngularJS加Bootstrap创建的一些页面组件，方便开发过程中的代码样例参考。</p>
            </div>
        </div>
        <div class="contentbox" ng-class="{'col-md-4': showNavPart && showExpPart, 'col-md-6': !showNavPart && showExpPart, 'col-md-9': showNavPart && !showExpPart, 'col-md-12': !showNavPart && !showExpPart}" ng-show="showSrcPart">
            <showcase-status></showcase-status>
            <showcase-source></showcase-source>
        </div>
    </div>
</div>